<template>
	<view>
		<view class="main">
			<view class="main-top">
				<view class="title">
					<view class="left">
						<u-icon name="/static/trade_total.png" color="#c8c9cc" size="26"></u-icon>
						<text>本月总交易统计</text>
					</view>
					<view class="right" @click="selectPro">
						<text>{{productName}}</text>
						<u-icon v-if="productTag == 1" name="arrow-down-fill" color="#ffffff" size="24"></u-icon>
						<u-icon v-else name="arrow-up-fill" color="#ffffff" size="24"></u-icon>
					</view>
				</view>
				<view class="total">
					<view class="left">
						<view class="number">
							<text>{{total.total ? total.total : '0.00'}}</text>
						</view>
						<view class="tit">
							<text>交易额(元)</text>
						</view>
					</view>
					<view class="right">
						<view class="number">
							<text>{{total.nums ? total.nums : 0}}</text>
						</view>
						<view class="tit">
							<text>交易笔数(笔)</text>
						</view>
					</view>
				</view>
			</view>
			<view class="main-cen">
				<view class="tag-list">
					<view class="items" :class="teamType == 1 ? 'active' : ''" @click="teamSelect(1)">
						<text>直营交易查询</text>
					</view>
					<view class="items" :class="teamType == 2 ? 'active' : ''" @click="teamSelect(2)">
						<text>团队交易查询</text>
					</view>
				</view>
			</view>
			<view class="main-bottom">
				<view v-if="lists && lists.length > 0">
					<view v-if="teamType == 1" class="lists">
						<view class="items" v-for="(item, index) in lists" :key="index" @click="toDay(item)">
							<view class="left">
								<view class="date">
									<text>{{item.month}}</text>
								</view>
								<view class="totals">
									<text>交易总额：</text>
									<text>{{item.total}}</text>
								</view>
							</view>
							<view class="right">
								<u-icon name="arrow-right" color="#c8c9cc" size="26"></u-icon>
							</view>
						</view>
					</view>
					<view v-else class="team-lists">
						<view class="items" v-for="(item, index) in lists" :key="index">
							<view class="top">
								<view class="left">
									<view class="avatar">
										<u-avatar size="60" :src="url_api + item.avatar" default-url="/static/default.jpg"></u-avatar>
									</view>
									<view class="user">
										<view class="name">
											<text>{{item.name}}</text>
										</view>
										<view class="phone">
											<text>{{item.phone}}</text>
										</view>
									</view>
								</view>
								<view class="right">
									<!-- <u-icon name="arrow-right" color="#c8c9cc" size="26"></u-icon> -->
								</view>
							</view>
							<view v-if="item.data.length > 0" v-for="(items, indexs) in item.data" :key="indexs" class="bottom">
								<view class="left">
									<text>{{items.month}}</text>
								</view>
								<view class="right">
									<text>{{items.total}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-empty class="policy_box" v-else mode="list" icon="/static/Empty/data_null.png">
				</u-empty>
			</view>
			<u-picker :show="productShow" :columns="productList" keyName="title" @confirm="proConfirm"
				@cancel="proCancel"></u-picker>
		</view>
	</view>
</template>

<script>
	var util = require('@/util/request.js');
	export default {
		data() {
			return {
				url_api: '',
				productTag: 1,
				productShow: false,
				productList: [],
				productId: '',
				productName: '全部',
				teamType: 1,
				lists: [],
				total: {},
			}
		},
		onLoad(e) {
			if (e.type) {
				this.teamType = e.type
			}
			this.url_api = util.API_URL
			this.getHzyProduct()
			this.loadData()
		},
		methods: {
			// 团队选择
			teamSelect(type) {
				this.teamType = type
				this.loadData()
			},
			// 详细
			toDay(item) {
				if (this.productId != '') {
					uni.navigateTo({
						url: '/pages/hzy/trade/days?month=' + item.month + '&agentId=' + item.main_id + '&productId=' + item.product_id
					})
				} else {
					uni.navigateTo({
						url: '/pages/hzy/trade/days?month=' + item.month + '&agentId=' + item.main_id + '&productId=' + this.productId
					})
				}
			},
			// 获取产品
			async getHzyProduct() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getHzyProduct',
				});
				if (res.code == 200) {
					this.productList = [res.data]
				}
			},
			// 加载数据
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getHzyTradeTotal',
					data: {
						productId: this.productId,
						teamType: this.teamType
					}
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.total = res.data.total
					this.lists = res.data.lists
				}
			},
			// 选择产品
			selectPro() {
				this.productTag = 2
				this.productShow = true
			},
			// 取消选择
			proCancel() {
				this.productTag = 1
				this.productShow = false
			},
			// 确定选择
			proConfirm(e) {
				this.productId = e.value[0].id
				this.productName = e.value[0].title
				this.productTag = 1
				this.productShow = false
				this.loadData()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		.main-top {
			margin: 30rpx;
			padding: 30rpx;
			background-color: #2979ff;
			border-radius: 20rpx;
			color: #ffffff;

			.title {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					text {
						padding-left: 16rpx;
					}
				}

				.right {
					display: flex;
					align-items: center;

					text {
						padding-right: 16rpx;
					}
				}
			}

			.total {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				text-align: center;
				align-items: center;

				.left {
					width: 40%;
				}

				.right {
					width: 40%;
				}

				.tit {
					padding-top: 10rpx;
					font-size: 26rpx;
				}
			}
		}

		.main-cen {
			margin: 0 30rpx;

			.tag-list {
				display: flex;
				justify-content: space-between;
				border-radius: 10rpx;
				border: 1px solid #2979ff;

				.items {
					width: 50%;
					text-align: center;
					align-items: center;
					padding: 18rpx;
					font-size: 28rpx;
				}

				.active {
					background-color: #2979ff;
					color: #ffffff;
				}
			}
		}

		.main-bottom {
			margin-top: 30rpx;

			.lists {
				.items {
					padding: 30rpx 30rpx;
					background-color: #ffffff;
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;

					.date {
						font-weight: bold;
						font-size: 28rpx;
						padding-bottom: 10rpx;
					}

					.totals {
						color: #909399;
					}
				}
			}

			.team-lists {
				.items {
					padding: 30rpx 30rpx;
					margin-bottom: 20rpx;
					background-color: #ffffff;
					font-size: 28rpx;

					.top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1px solid #f4f4f5;
						padding-bottom: 30rpx;

						.left {
							display: flex;

							.user {
								padding-left: 20rpx;

								.name {
									padding-top: 10rpx;
									padding-bottom: 20rpx;
								}
							}
						}
					}

					.bottom {
						padding: 30rpx 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1px solid #f4f4f5;
					}
				}
			}
		}
	}
</style>